<template>
  <div
    class="circle-outer"
    :style="{ border: `1px solid ${backgroundColor}` }">
    <div
      class="circle-inner"
      :style="{ backgroundColor }">
      <div class="text">{{ value }}</div>
      <div class="text">{{ label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  backgroundColor: {
    type: String,
    default: '#c27823'
  },
  borderColor: {
    type: String,
    default: '#c27823'
  },
  label: {
    type: String,
    default: '预警'
  },
  value: {
    type: Number,
    default: 0
  }
})
</script>

<style scoped lang="scss">
.circle-outer {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 1px solid #c27823;
  position: relative;

  .circle-inner {
    margin: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 80%;
    width: 80%;
    border-radius: 50%;
    background-color: #c27823;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
}
</style>
